import { Component } from 'react';
import Listcontext from './Listcontext';
import ListItem from './ListItem';
class Listmore extends Component {

    constructor(props) {
        super(props);
        this.state = {
            msg: ''
        };
        this.fromGranson = this.fromGranson.bind(this)
    }

    fromGranson(msg) {
        this.setState({
            msg
        })
    }

    render() {
        return (
            <div style={{ backgroundColor: '#85ba2a', padding: '20px', width: '500px', margin: 'auto', textAlign: 'center' }}>
                <p>context通信实例</p>
                <span style={{ color: 'red' }}>{this.state.msg}</span>
                {/* 指定使用上下文范围，传入值为对象 */}
                <Listcontext.Provider value={{ text: '我是Listmore组件传给你的数据', toParent: this.fromGranson }}>
                    <ListItem></ListItem>
                </Listcontext.Provider>
            </div>
        );
    }
}

// 导出组件
export default Listmore;